<template>
  <!--  数据报表-->
  <div class="box-view">
    <el-row :gutter="5">
      <el-col :span="4" class="left_org">
        <!-- 搜索框 -->
        <organization-tree v-model="deptTree" ref="deptTree" :changeOnSelect='true' placeholder="选择管养单位"
                           @change="selectOrgHandel"></organization-tree>
      </el-col>
      <el-col :span="20">
        <el-form ref="form" :model="form" label-width="100px" label-suffix=":">
          <el-tabs v-model="activeName " type="border-card" @tab-click="handleClick">
            <el-tab-pane name="first" label="边坡高度分布">
              <template>
                <el-button icon="el-icon-download" class="common_btn-defalut" style="margin-bottom: 10px"
                           @click="downLoadSlopeHeight">下载当前报表
                </el-button>
                <el-table height="79vh" stripe :data="slopeHeightList" border style="width: 100%;">
                  <el-table-column label="序号" width="40">
                    <template slot-scope="scope">
                      {{ getIndex(scope.$index) }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="deptName" label="子级单位" min-width="150"></el-table-column>
                  <el-table-column sortable align="center" prop="slopeCount" label="边坡总数" width="60"></el-table-column>
                  <el-table-column align="center" label="土质边坡">
                    <el-table-column label="总数" align="center" width="65">
                      <template slot-scope="scope">
                        {{scope.row.slopeType1.sumCount}}
                      </template>
                    </el-table-column>
                    <el-table-column label="0-10m" align="center" width="50">
                      <template slot-scope="scope">
                        {{scope.row.slopeType1.count1}}
                      </template>
                    </el-table-column>
                    <el-table-column label="10-20m" align="center" width="50">
                      <template slot-scope="scope">
                        {{scope.row.slopeType1.count2}}
                      </template>
                    </el-table-column>
                    <el-table-column label="20-30m" align="center" width="50">
                      <template slot-scope="scope">
                        {{scope.row.slopeType1.count3}}
                      </template>
                    </el-table-column>
                    <el-table-column label="30-40m" align="center" width="50">
                      <template slot-scope="scope">
                        {{scope.row.slopeType1.count4}}
                      </template>
                    </el-table-column>
                    <el-table-column label="40-50m" align="center" width="50">
                      <template slot-scope="scope">
                        {{scope.row.slopeType1.count5}}
                      </template>
                    </el-table-column>
                    <el-table-column label=">=50m" align="center" width="45">
                      <template slot-scope="scope">
                        {{scope.row.slopeType1.count6}}
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="岩质边坡">
                    <el-table-column label="总数" align="center" width="65">
                      <template slot-scope="scope">
                        {{scope.row.slopeType2.sumCount}}
                      </template>
                    </el-table-column>
                    <el-table-column label="0-10m" align="center" width="50">
                      <template slot-scope="scope">
                        {{scope.row.slopeType2.count1}}
                      </template>
                    </el-table-column>
                    <el-table-column label="10-20m" align="center" width="50">
                      <template slot-scope="scope">
                        {{scope.row.slopeType2.count2}}
                      </template>
                    </el-table-column>
                    <el-table-column label="20-30m" align="center" width="50">
                      <template slot-scope="scope">
                        {{scope.row.slopeType2.count3}}
                      </template>
                    </el-table-column>
                    <el-table-column label="30-40m" align="center" width="50">
                      <template slot-scope="scope">
                        {{scope.row.slopeType2.count4}}
                      </template>
                    </el-table-column>
                    <el-table-column label="40-50m" align="center" width="50">
                      <template slot-scope="scope">
                        {{scope.row.slopeType2.count5}}
                      </template>
                    </el-table-column>
                    <el-table-column label=">=50m" align="center" width="45">
                      <template slot-scope="scope">
                        {{scope.row.slopeType2.count6}}
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="填方边坡">
                    <el-table-column label="总数" align="center" width="65">
                      <template slot-scope="scope">
                        {{scope.row.slopeType3.sumCount}}
                      </template>
                    </el-table-column>
                    <el-table-column label="0-10m" align="center" width="50">
                      <template slot-scope="scope">
                        {{scope.row.slopeType3.count1}}
                      </template>
                    </el-table-column>
                    <el-table-column label="10-20m" align="center" width="50">
                      <template slot-scope="scope">
                        {{scope.row.slopeType3.count2}}
                      </template>
                    </el-table-column>
                    <el-table-column label="20-30m" align="center" width="50">
                      <template slot-scope="scope">
                        {{scope.row.slopeType3.count3}}
                      </template>
                    </el-table-column>
                    <el-table-column label="30-40m" align="center" width="50">
                      <template slot-scope="scope">
                        {{scope.row.slopeType3.count4}}
                      </template>
                    </el-table-column>
                    <el-table-column label="40-50m" align="center" width="50">
                      <template slot-scope="scope">
                        {{scope.row.slopeType3.count5}}
                      </template>
                    </el-table-column>
                    <el-table-column label=">=50m" align="center" width="45">
                      <template slot-scope="scope">
                        {{scope.row.slopeType3.count6}}
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane name="second" label="年度技术状况评定">
              <template>
                <el-form-item label="开始年份" style="display: inline-block;width: 220px;margin-right: 20px">
                  <el-date-picker v-model="time" type="year" value-format="timestamp"
                                  style="width: 140px;margin-right: 20px" :clearable="false"
                                  @change="querySlopeTechniqueYearCount" placeholder="选择年份"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束年份" style="display: inline-block;width: 220px;margin-right: 20px">
                  <el-date-picker v-model="timeEnd" type="year" value-format="timestamp"
                                  style="width: 140px;margin-right: 20px" :clearable="false"
                                  @change="querySlopeTechniqueYearCount" placeholder="选择年份"></el-date-picker>
                </el-form-item>
                <el-button icon="el-icon-download" class="common_btn-defalut"
                           style="margin-bottom: 10px;margin-left: 20px"
                           @click="downloadSlopeTechniqueYearCount">下载当前报表
                </el-button>
                <el-table border height="79vh" :data="slopeTechniqueYearCountList" stripe>
                  <el-table-column label="序号" width="40">
                    <template slot-scope="scope">
                      {{ getIndex(scope.$index) }}
                    </template>
                  </el-table-column>
                  <el-table-column type="expand" label="展开" min-width="100">
                    <template slot-scope="props">
                      <p style="margin-bottom: 10px;color: #1990FE;">各边坡技术评定次数</p>
                      <el-table :data="props.row.slopeList" style="width: 100%">
                        <el-table-column align="center" prop="id" label="边坡编号" min-width="150"></el-table-column>
                        <el-table-column align="center" prop="name" label="边坡名称" min-width="150"></el-table-column>
                        <el-table-column align="center" prop="num" label="技术评定次数" min-width="100"></el-table-column>
                      </el-table>
                    </template>
                  </el-table-column>
                  <el-table-column sortable align="center" prop="parentDeptName" label="上级单位"
                                   min-width="150"></el-table-column>
                  <el-table-column align="center" prop="deptName" label="管养单位" min-width="150"></el-table-column>
                  <el-table-column sortable align="center" prop="mainCount" label="技术评定次数"
                                   min-width="100"></el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane name="second_one" label="年度风险评估">
              <template>
                <el-form-item label="开始年份" style="display: inline-block;width: 220px;margin-right: 20px">
                  <el-date-picker v-model="time" type="year" value-format="timestamp"
                                  style="width: 140px;margin-right: 20px" :clearable="false"
                                  @change="queryRiskYearCount" placeholder="选择年份"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束年份" style="display: inline-block;width: 220px;margin-right: 20px">
                  <el-date-picker v-model="timeEnd" type="year" value-format="timestamp"
                                  style="width: 140px;margin-right: 20px" :clearable="false"
                                  @change="queryRiskYearCount" placeholder="选择年份"></el-date-picker>
                </el-form-item>
                <el-button icon="el-icon-download" class="common_btn-defalut"
                           style="margin-bottom: 10px;margin-left: 20px"
                           @click="downloadSlopeRiskYearCount">下载当前报表
                </el-button>
                <el-table border height="79vh" :data="slopeRiskYearCountList" stripe>
                  <el-table-column label="序号" width="40">
                    <template slot-scope="scope">
                      {{ getIndex(scope.$index) }}
                    </template>
                  </el-table-column>
                  <el-table-column type="expand" label="展开" min-width="100">
                    <template slot-scope="props">
                      <p style="margin-bottom: 10px;color: #1990FE;">各边坡风险评估次数</p>
                      <el-table :data="props.row.slopeList" style="width: 100%">
                        <el-table-column align="center" prop="id" label="边坡编号" min-width="150"></el-table-column>
                        <el-table-column align="center" prop="name" label="边坡名称" min-width="150"></el-table-column>
                        <el-table-column align="center" prop="num" label="风险评估次数" min-width="100"></el-table-column>
                      </el-table>
                    </template>
                  </el-table-column>
                  <el-table-column sortable align="center" prop="parentDeptName" label="上级单位"
                                   min-width="150"></el-table-column>
                  <el-table-column align="center" prop="deptName" label="管养单位" min-width="150"></el-table-column>
                  <el-table-column sortable align="center" prop="mainCount" label="风险评估次数"
                                   min-width="100"></el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane name="second_two" label="年度养护检查">
              <template>
                <el-form-item label="检查类型" label-width="80px">
                  <el-radio-group v-model="form.code" @change="queryMaintenanceCount">
                    <el-radio-button v-for="item in yangHuType" :key="item.code" :label="item.code">{{item.name}}
                    </el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="时间类型" label-width="80px">
                  <el-radio-group size="mini" v-model="form.timeType" @change="queryMaintenanceCount">
                    <el-radio-button v-for="item in timeType" :key="item.code" :label="item.code">{{item.name}}
                    </el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item :label="'开始'+timeLabel" style="display: inline-block;width: 220px;margin-right: 20px">
                  <el-date-picker v-model="time" :type="pickerType" value-format="timestamp"
                                  style="width: 140px;margin-right: 20px" :clearable="false"
                                  @change="queryMaintenanceCount" :placeholder="'选择'+timeLabel"></el-date-picker>
                </el-form-item>
                <el-form-item :label="'结束'+timeLabel" style="display: inline-block;width: 220px;margin-right: 20px">
                  <el-date-picker v-model="timeEnd" :type="pickerType" value-format="timestamp"
                                  style="width: 140px;margin-right: 20px" :clearable="false"
                                  @change="queryMaintenanceCount" :placeholder="'选择'+timeLabel"></el-date-picker>
                </el-form-item>
                <el-button icon="el-icon-download" class="common_btn-defalut"
                           style="margin-left: 20px;margin-bottom: 10px"
                           @click="downloadMaintenanceCount">下载当前报表
                </el-button>
                <el-table border height="64vh" :data="slopeTechniqueYearCountList" stripe>
                  <el-table-column label="序号" width="40">
                    <template slot-scope="scope">
                      {{ getIndex(scope.$index) }}
                    </template>
                  </el-table-column>
                  <el-table-column type="expand" label="展开" min-width="100">
                    <template slot-scope="props">
                      <p style="margin-bottom: 10px;color: #1990FE;">各边坡评定次数</p>
                      <el-table :data="props.row.slopeList" style="width: 100%">
                        <el-table-column align="center" prop="id" label="边坡编号" min-width="150"></el-table-column>
                        <el-table-column align="center" prop="name" label="边坡名称" min-width="150"></el-table-column>
                        <el-table-column align="center" prop="num" :label="yangHuTypeName"
                                         min-width="100"></el-table-column>
                      </el-table>
                    </template>
                  </el-table-column>
                  <el-table-column sortable align="center" prop="parentDeptName" label="上级单位"
                                   min-width="150"></el-table-column>
                  <el-table-column align="center" prop="deptName" label="管养单位" min-width="150"></el-table-column>
                  <el-table-column sortable align="center" prop="mainCount" :label="yangHuTypeName"
                                   min-width="100"></el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane name="third" label="技术评定等级占比">
              <template>
                <el-select v-model="form.roadId" filterable clearable placeholder="可选择路线"
                           style="width:300px;margin-right: 20px" @change="queryDeptSlopeStatusCount">
                  <el-option
                    v-for="item in deptRoadList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
                <el-button icon="el-icon-download" class="common_btn-defalut" style="margin-bottom: 10px"
                           @click="downloadDeptSlopeStatusCount">下载当前报表
                </el-button>
                <el-table border height="79vh" :data="slopeStatusList" stripe>
                  <el-table-column label="序号" width="40">
                    <template slot-scope="scope">
                      {{ getIndex(scope.$index) }}
                    </template>
                  </el-table-column>
                  <el-table-column type="expand" label="展开" min-width="100">
                    <template slot-scope="props">
                      <p style="margin-bottom: 10px;color: #1990FE;">各路线边坡评定等级</p>
                      <el-table :data="props.row.roadList" style="width: 100%">
                        <el-table-column align="center" prop="roadCode" label="路线编号" min-width="50"></el-table-column>
                        <el-table-column align="center" prop="roadName" label="路线名称" min-width="150"></el-table-column>
                        <el-table-column align="center" prop="slopeCount" label="边坡总数" min-width="80"></el-table-column>
                        <el-table-column align="center" prop="count0" label="未评定" min-width="50"></el-table-column>
                        <el-table-column align="center" prop="count1" label="1类" min-width="50"></el-table-column>
                        <el-table-column align="center" prop="count2" label="2类" min-width="50"></el-table-column>
                        <el-table-column align="center" prop="count3" label="3类" min-width="50"></el-table-column>
                        <el-table-column align="center" prop="count4" label="4类" min-width="50"></el-table-column>
                        <el-table-column align="center" prop="count5" label="5类" min-width="50"></el-table-column>
                      </el-table>
                    </template>
                  </el-table-column>
                  <el-table-column sortable align="center" prop="parentDeptName" label="上级单位"
                                   min-width="150"></el-table-column>
                  <el-table-column align="center" prop="deptName" label="管养单位" min-width="150"></el-table-column>
                  <el-table-column sortable align="center" prop="slopeCount" label="边坡总数"
                                   min-width="80"></el-table-column>
                  <el-table-column sortable align="center" prop="count0" label="未评定" min-width="50"></el-table-column>
                  <el-table-column sortable align="center" prop="count1" label="1类" min-width="50"></el-table-column>
                  <el-table-column sortable align="center" prop="count2" label="2类" min-width="50"></el-table-column>
                  <el-table-column sortable align="center" prop="count3" label="3类" min-width="50"></el-table-column>
                  <el-table-column sortable align="center" prop="count4" label="4类" min-width="50"></el-table-column>
                  <el-table-column sortable align="center" prop="count5" label="5类" min-width="50"></el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane name="four" label="风险评估等级占比">
              <template>
                <el-select v-model="form.roadId" filterable clearable placeholder="可选择路线"
                           style="width:300px;margin-right: 20px" @change="queryDeptSlopeStatusCount">
                  <el-option
                    v-for="item in deptRoadList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
                <el-button icon="el-icon-download" class="common_btn-defalut" style="margin-bottom: 10px"
                           @click="downloadDeptSlopeStatusCount">下载当前报表
                </el-button>
                <el-table border height="79vh" :data="slopeStatusList" stripe>
                  <el-table-column label="序号" width="40">
                    <template slot-scope="scope">
                      {{ getIndex(scope.$index) }}
                    </template>
                  </el-table-column>
                  <el-table-column type="expand" label="展开" min-width="100">
                    <template slot-scope="props">
                      <p style="margin-bottom: 10px;color: #1990FE;">各路线边坡风险评估等级</p>
                      <el-table :data="props.row.roadList" style="width: 100%">
                        <el-table-column align="center" prop="roadCode" label="路线编号" min-width="50"></el-table-column>
                        <el-table-column align="center" prop="roadName" label="路线名称" min-width="150"></el-table-column>
                        <el-table-column align="center" prop="slopeCount" label="边坡总数" min-width="80"></el-table-column>
                        <el-table-column align="center" prop="count0" label="未评估" min-width="50"></el-table-column>
                        <el-table-column align="center" prop="count1" label="I级" min-width="50"></el-table-column>
                        <el-table-column align="center" prop="count2" label="II级" min-width="50"></el-table-column>
                        <el-table-column align="center" prop="count3" label="III级" min-width="50"></el-table-column>
                        <el-table-column align="center" prop="count4" label="IV级" min-width="50"></el-table-column>
                        <el-table-column align="center" prop="count5" label="V级" min-width="50"></el-table-column>
                      </el-table>
                    </template>
                  </el-table-column>
                  <el-table-column sortable align="center" prop="parentDeptName" label="上级单位"
                                   min-width="150"></el-table-column>
                  <el-table-column align="center" prop="deptName" label="管养单位" min-width="150"></el-table-column>
                  <el-table-column sortable align="center" prop="slopeCount" label="边坡总数"
                                   min-width="80"></el-table-column>
                  <el-table-column sortable align="center" prop="count0" label="未评估" min-width="50"></el-table-column>
                  <el-table-column sortable align="center" prop="count1" label="I级" min-width="50"></el-table-column>
                  <el-table-column sortable align="center" prop="count2" label="II级" min-width="50"></el-table-column>
                  <el-table-column sortable align="center" prop="count3" label="III级" min-width="50"></el-table-column>
                  <el-table-column sortable align="center" prop="count4" label="IV级" min-width="50"></el-table-column>
                  <el-table-column sortable align="center" prop="count5" label="V级" min-width="50"></el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
<!--            <el-tab-pane name="five" label="养护排查等级占比">-->
<!--              <template>-->
<!--                <el-select v-model="form.roadId" filterable clearable placeholder="可选择路线"-->
<!--                           style="width:300px;margin-right: 20px" @change="queryDeptSlopeStatusCount">-->
<!--                  <el-option-->
<!--                    v-for="item in deptRoadList"-->
<!--                    :key="item.id"-->
<!--                    :label="item.name"-->
<!--                    :value="item.id">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--                <el-button icon="el-icon-download" class="common_btn-defalut" style="margin-bottom: 10px"-->
<!--                           @click="downloadDeptSlopeStatusCount">下载当前报表-->
<!--                </el-button>-->
<!--                <el-table border height="79vh" :data="slopeStatusList" stripe>-->
<!--                  <el-table-column label="序号" width="40">-->
<!--                    <template slot-scope="scope">-->
<!--                      {{ getIndex(scope.$index) }}-->
<!--                    </template>-->
<!--                  </el-table-column>-->
<!--                  <el-table-column type="expand" label="展开" min-width="100">-->
<!--                    <template slot-scope="props">-->
<!--                      <p style="margin-bottom: 10px;color: #1990FE;">各路线边坡养护排查等级</p>-->
<!--                      <el-table :data="props.row.roadList" style="width: 100%">-->
<!--                        <el-table-column align="center" prop="roadCode" label="路线编号" min-width="50"></el-table-column>-->
<!--                        <el-table-column align="center" prop="roadName" label="路线名称" min-width="150"></el-table-column>-->
<!--                        <el-table-column align="center" prop="slopeCount" label="边坡总数" min-width="80"></el-table-column>-->
<!--                        <el-table-column align="center" prop="count0" label="未排查" min-width="50"></el-table-column>-->
<!--                        <el-table-column align="center" prop="count1" label="正常" min-width="50"></el-table-column>-->
<!--                        <el-table-column align="center" prop="count2" label="存在轻微病害" min-width="50"></el-table-column>-->
<!--                        <el-table-column align="center" prop="count3" label="重大隐患I级" min-width="50"></el-table-column>-->
<!--                        <el-table-column align="center" prop="count4" label="重大隐患II级" min-width="50"></el-table-column>-->
<!--                        <el-table-column align="center" prop="count5" label="一般III级" min-width="50"></el-table-column>-->
<!--                        <el-table-column align="center" prop="count6" label="一般IV级" min-width="50"></el-table-column>-->
<!--                      </el-table>-->
<!--                    </template>-->
<!--                  </el-table-column>-->
<!--                  <el-table-column sortable align="center" prop="parentDeptName" label="上级单位"-->
<!--                                   min-width="150"></el-table-column>-->
<!--                  <el-table-column align="center" prop="deptName" label="管养单位" min-width="150"></el-table-column>-->
<!--                  <el-table-column sortable align="center" prop="slopeCount" label="边坡总数"-->
<!--                                   min-width="80"></el-table-column>-->
<!--                  <el-table-column sortable align="center" prop="count0" label="未排查" min-width="50"></el-table-column>-->
<!--                  <el-table-column sortable align="center" prop="count1" label="正常" min-width="50"></el-table-column>-->
<!--                  <el-table-column sortable align="center" prop="count2" label="存在轻微病害"-->
<!--                                   min-width="50"></el-table-column>-->
<!--                  <el-table-column sortable align="center" prop="count3" label="重大隐患I级"-->
<!--                                   min-width="50"></el-table-column>-->
<!--                  <el-table-column sortable align="center" prop="count4" label="重大隐患II级"-->
<!--                                   min-width="50"></el-table-column>-->
<!--                  <el-table-column sortable align="center" prop="count5" label="一般III级"-->
<!--                                   min-width="50"></el-table-column>-->
<!--                  <el-table-column sortable align="center" prop="count6" label="一般IV级" min-width="50"></el-table-column>-->
<!--                </el-table>-->
<!--              </template>-->
<!--            </el-tab-pane>-->
            <el-tab-pane name="six" label="未填写支护信息边坡统计">
              <template>
                <el-button icon="el-icon-download" class="common_btn-defalut" style="margin-bottom: 10px"
                           @click="downloadDeptSlopeProtections">下载未填写支护信息边坡
                </el-button>
                <el-table height="79vh" stripe :data="deptSlopeProtectionList" border style="width: 100%;">
                  <el-table-column label="序号" width="40">
                    <template slot-scope="scope">
                      {{ getIndex(scope.$index) }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="deptName" label="子级单位" min-width="150"></el-table-column>
                  <el-table-column sortable align="center" prop="count0" label="未填写支护信息数量" min-width="150"></el-table-column>
                  <el-table-column sortable align="center" prop="slopeCount" label="边坡总数" min-width="150"></el-table-column>
                  <el-table-column sortable align="center"  label="百分比" min-width="150">
                    <template slot-scope="scope">
                      <div v-if="scope.row.slopeCount==0">
                        0.00%
                      </div>
                      <div v-else>
                        {{(scope.row.count0/scope.row.slopeCount*100).toFixed(2)}}%
                      </div>

                    </template>
                  </el-table-column>


                </el-table>
              </template>
            </el-tab-pane>

            <el-tab-pane name="seven" label="边坡技术状况评定情况统计">
              <template>
                <el-button icon="el-icon-download" class="common_btn-defalut" style="margin-bottom: 10px"
                           @click="downloadDeptSlopeTechniques">下载边坡技术状况评定情况
                </el-button>
                <el-table height="79vh" stripe :data="deptSlopeTechniqueList" border style="width: 100%;">
                  <el-table-column label="序号" width="40">
                    <template slot-scope="scope">
                      {{ getIndex(scope.$index) }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="deptName" label="子级单位" min-width="150"></el-table-column>
                  <el-table-column sortable align="center" prop="slopeCount" label="应开展评定边坡总数" min-width="150"></el-table-column>
                  <el-table-column sortable align="center" prop="count0" label="已开展评定边坡数量" min-width="150"></el-table-column>
                  <el-table-column sortable align="center" prop="count0" label="未开展评定边坡数量" min-width="150">
                    <template slot-scope="scope">
                      {{scope.row.slopeCount-scope.row.count0}}
                    </template>
                  </el-table-column>
                  <el-table-column sortable align="center"  label="完成情况（%）" min-width="150">
                    <template slot-scope="scope">
                      <div v-if="scope.row.slopeCount==0">
                        0.00%
                      </div>
                      <div v-else>
                        {{(scope.row.count0/scope.row.slopeCount*100).toFixed(2)}}%
                      </div>

                    </template>
                  </el-table-column>


                </el-table>
              </template>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </el-col>
    </el-row>
    <x-loading v-show="isLoading"></x-loading>
  </div>

</template>

<script>
  import {
    downloadDeptSlopeProtection,
    queryDeptSlopeHeight,
    downloadDeptSlopeHeight,
    querySlopeTechniqueYearCount,
    downloadSlopeTechniqueYearCount,
    queryDeptSlopeStatusCount,
    downloadDeptSlopeStatusCount,
    queryMaintenanceCount,
    queryRiskYearCount,
    downloadRiskYearCount,
    downloadMaintenanceCount,
    queryDeptSlopeProtection,queryDeptSlopeTechnique,downloadDeptSlopeTechnique
  } from '@/services/model/dataReport'
  import OrganizationTree from '@/components/organization-tree/all'
  import Format from '@/utils/format'
  import {getRoadSelectList} from '@/services/model/road-mgmt'
  import XLoading from '@/components/animation/x-loading.vue'

  export default {
    components: {OrganizationTree, XLoading},
    data() {
      return {
        isLoading: false,
        title: '',
        activeName: 'first',
        // 表单
        form: {
          roadId: ''
        },
        time: '',
        timeEnd: '',
        deptSlopeProtectionList:[],
        slopeHeightList: [],
        deptSlopeTechniqueList:[],
        deptTree: {
          breadList: [],//面包屑
          deptTreeId: '',
        },
        deptRoadList: [],
        yangHuType: [
          {code: 1, name: '日常巡查'},
          {code: 2, name: '经常性检查'},
        ],
        timeType: [
          {code: 1, name: '年度'},
          {code: 2, name: '月度'},
          {code: 3, name: '周度'},
        ],
        slopeStatusList: [],
        slopeTechniqueYearCountList: [],
        slopeRiskYearCountList: [],
      }
    },
    mounted() {
      this.time = new Date().getTime()
      this.timeEnd = new Date().getTime()
    },
    computed: {
      yangHuTypeName() {
        if (this.form.code === 1) {
          return '日常巡查'
        }
        return '经常性检查'
      },
      timeLabel() {
        if (this.form.timeType === 1) {
          return '年份'
        } else if (this.form.timeType === 2) {
          return '月份'
        } else if (this.form.timeType === 3) {
          return '日期'
        }
        return '年度'
      },
      pickerType() {
        if (this.form.timeType === 1) {
          return 'year'
        } else if (this.form.timeType === 2) {
          return 'month'
        } else if (this.form.timeType === 3) {
          return 'date'
        }
        return 'year'
      },
    },
    methods: {
      //下载边坡高度报表
      async downLoadSlopeHeight() {
        await downloadDeptSlopeHeight(this.form)
      },
      //下载技术评定年度报表
      async downloadSlopeTechniqueYearCount() {
        await downloadSlopeTechniqueYearCount(this.form)
      },
      //下载风险评估年度报表
      async downloadSlopeRiskYearCount() {
        await downloadRiskYearCount(this.form)
      },
      //下载边坡评定等级占比报表
      async downloadDeptSlopeStatusCount() {
        await downloadDeptSlopeStatusCount(this.form)
      },
      //下载养护管理年度报表
      async downloadMaintenanceCount() {
        await downloadMaintenanceCount(this.form)
      },
      // 下载未填写支护信息边坡
      async downloadDeptSlopeProtections() {
        await downloadDeptSlopeProtection(this.form)
      },
      // 下载未技术评定边坡
      async downloadDeptSlopeTechniques() {
        await downloadDeptSlopeTechnique(this.form)
      },
      handleClick() {
        if (this.activeName === 'first') {
          this.queryDeptSlopeHeight()
        } else if (this.activeName === 'second') {
          this.form.code = null
          this.querySlopeTechniqueYearCount()
        } else if (this.activeName === 'second_one') {
          this.form.code = null
          this.queryRiskYearCount()
        } else if (this.activeName === 'second_two') {
          this.$set(this.form, "code", 1);
          this.$set(this.form, "timeType", 1);
          this.queryMaintenanceCount()
          if (this.deptRoadList.length === 0) {
            this.roadSelect()
          }
        } else if (this.activeName === 'third') {
          this.form.code = 6
          this.queryDeptSlopeStatusCount()
          if (this.deptRoadList.length === 0) {
            this.roadSelect()
          }
        } else if (this.activeName === 'four') {
          this.form.code = 1
          this.queryDeptSlopeStatusCount()
          if (this.deptRoadList.length === 0) {
            this.roadSelect()
          }
        } else if (this.activeName === 'five') {
          this.form.code = 2
          this.queryDeptSlopeStatusCount()
          if (this.deptRoadList.length === 0) {
            this.roadSelect()
          }
        }else if (this.activeName === 'six') {
          this.queryDeptSlopeProtections()
        }else if(this.activeName === 'seven'){
          this.queryDeptSlopeTechnique()
        }
      },
      //获取路线列表
      async roadSelect() {
        let {data} = await getRoadSelectList({deptId: this.form.deptTreeId})
        this.deptRoadList = data || []
      },
      updateEchats() {
        if (this.activeName === 'first') {
          this.queryDeptSlopeHeight()
        } else if (this.activeName === 'second') {
          this.form.code = null
          this.form.startCreateTime = new Date()
          this.querySlopeTechniqueYearCount()
        } else if (this.activeName === 'second_one') {
          this.form.code = null
          this.queryRiskYearCount()
        } else if (this.activeName === 'second_two') {
          this.$set(this.form, "code", 1);
          this.$set(this.form, "timeType", 1);
          this.queryMaintenanceCount()
          if (this.deptRoadList.length === 0) {
            this.roadSelect()
          }
        } else if (this.activeName === 'third') {
          this.form.code = 6
          this.queryDeptSlopeStatusCount()
          if (this.deptRoadList.length === 0) {
            this.roadSelect()
          }
        } else if (this.activeName === 'four') {
          this.form.code = 1
          this.queryDeptSlopeStatusCount()
          if (this.deptRoadList.length === 0) {
            this.roadSelect()
          }
        } else if (this.activeName === 'five') {
          this.form.code = 2
          this.queryDeptSlopeStatusCount()
          if (this.deptRoadList.length === 0) {
            this.roadSelect()
          }
        }
        else if (this.activeName === 'six') {
          this.queryDeptSlopeProtections()
        }else if(this.activeName === 'seven'){
          this.queryDeptSlopeTechnique()
        }
      },
      //边坡高度
      async queryDeptSlopeHeight() {
        let res = await queryDeptSlopeHeight(this.form)
        this.slopeHeightList = res.data || []
      },
      //未填写支护信息边坡统计
      async queryDeptSlopeProtections() {
        let res = await queryDeptSlopeProtection(this.form)
        this.deptSlopeProtectionList = res.data || []
      },
      async queryDeptSlopeTechnique() {
        let res = await queryDeptSlopeTechnique(this.form)
        this.deptSlopeTechniqueList = res.data || []
      },
      //风险评估、技术评定、养护检查等级统计
      async queryDeptSlopeStatusCount() {
        let res = await queryDeptSlopeStatusCount(this.form)
        this.slopeStatusList = res.data || []
      },
      //年度风险评估
      async queryRiskYearCount() {
        this.form.startCreateTime = this.time
        this.form.endCreateTime = this.timeEnd
        let res = await queryRiskYearCount(this.form)
        this.slopeRiskYearCountList = res.data || []
      },
      //年度技术评定
      async querySlopeTechniqueYearCount() {
        this.form.startCreateTime = this.time
        this.form.endCreateTime = this.timeEnd
        let res = await querySlopeTechniqueYearCount(this.form)
        this.slopeTechniqueYearCountList = res.data || []
      },
      //年度养护检查
      async queryMaintenanceCount() {
        this.form.startCreateTime = this.time
        this.form.endCreateTime = this.timeEnd
        let res = await queryMaintenanceCount(this.form)
        this.slopeTechniqueYearCountList = res.data || []
      },
      //组织机构组件回调
      selectOrgHandel() {
        this.$forceUpdate()
        this.form.deptTreeId = this.deptTree.deptTreeId
        this.updateEchats()
      },
      getIndex(index) {
        let param = index + 1;
        return param;
      },
    }
  }
</script>

<style scoped="scoped" lang="less">
  /deep/ .el-table th > .cell {
    padding: 0px 0px !important;
  }

  /deep/ .el-table__expanded-cell {
    background: #d3d3d3;
  }

  .el-table {
    /deep/ .el-table {
      th {
        background-color: #0DC26B !important;
        padding: 5px !important;
      }
    }
  }
</style>
